<%--
  Created by IntelliJ IDEA.
  User: 11076
  Date: 2018/12/12
  Time: 15:02
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <%@ include file="../base/top.jsp" %>
    <!-- 下拉框 -->
    <link rel="stylesheet" href="static/ace/css/chosen.css"/>
    <!-- 日期框 -->
    <link rel="stylesheet" href="static/ace/css/datepicker.css"/>

    <link rel="stylesheet" href="static/jsGrid/css/jsgrid.css"/>
    <link rel="stylesheet" href="static/jsGrid/css/jsgrid-theme.css"/>
    <style>
        th{
            text-align: center;
        }
        .jsgrid-grid-header{
            overflow-x: auto;
            overflow-y: auto;
        }
        .jsgrid-grid-body{
            overflow-x: auto;
            overflow-y: auto;
        }
    </style>
</head>
<body>
    <input type="text" name="stageId" id="stage-id" style="display: none"/>
    <input type="text" name="success" id="success" style="display: none"/>
    <input type="text" name="msg" id="msg" style="display: none"/>
    <div id="jsGrid" style="width: 100%"></div>

    <div class="center" style="margin-top: 20px">
        <button class="btn btn-success" id="save-btn">保存</button>
        <button class="btn btn-mini btn-danger" onclick="top.Dialog.close()">取消</button>
    </div>


    <%@ include file="../base/foot.jsp" %>
    <script type="text/javascript" src="static/jsGrid/js/jsgrid.js"></script>
    <script>
        var clients = [
            // { "Name": "Otto Clay", "Age": 25, "Country": 1, "Address": "Ap #897-1459 Quam Avenue", "Married": false },
            // { "Name": "Connor Johnston", "Age": 45, "Country": 2, "Address": "Ap #370-4647 Dis Av.", "Married": true },
            // { "Name": "Lacey Hess", "Age": 29, "Country": 3, "Address": "Ap #365-8835 Integer St.", "Married": false },
            // { "Name": "Timothy Henson", "Age": 56, "Country": 1, "Address": "911-5143 Luctus Ave", "Married": true },
            // { "Name": "Ramona Benton", "Age": 32, "Country": 3, "Address": "Ap #614-689 Vehicula Street", "Married": false }
        ];

        $(document).ready(function () {
            <c:if test="${ not empty stageChain}">
                if('edit'=='${dotype}'){
                    var stageChain =  ${stageChain};
                    clients =stageChain.stageInfoList;
                    $("#stage-id").val(stageChain.firstStageId);
                }
            </c:if>
            $("#jsGrid").jsGrid({
                width: "100%",
                inserting: true,
                editing: true,
                data: clients,
                noDataContent:"请添加数据",
                fields: [
                    { name: "stageName", type: "text", width: 150, title: "阶段名",validate: "required" },
                    //{ name: "Age", type: "number", width: 50 },
                    // { name: "Address", type: "text", width: 200 },
                    // { name: "Country", type: "select", items: countries, valueField: "Id", textField: "Name" },
                    // { name: "Married", type: "checkbox", title: "Is Married", sorting: false },
                    { type: "control" }
                ]
            });
        });
        //获取全部数据
        //var data = $("#grid-jsGrid").jqGrid('getRowData');
        $("#save-btn").click(function () {
            var stageChain ={};
            stageChain.firstStageId = $("#stage-id").val();
            var array = [];
            for(var i= 0;i<$("#jsGrid tbody tr").length;i++) {
                array.push({"stageName":$("#jsGrid tbody tr:eq("+i+") td:eq(0)").text()});
            }
            stageChain.stageInfoList =array;
            var json = JSON.stringify(stageChain);
            $.ajax({
                type:"POST",
                url:"<%=basePath%>stage/${dotype}",
                contentType:"application/json",
                data:json,
                dataType:'json',
                success:function (data) {
                    $("#success").val(data["success"]);
                    $("#msg").val(data["msg"]);
                    top.Dialog.close();
                }
            });
        });
    </script>
</body>
</html>
